<template>
  <div>
    <el-container>
      <el-header><top-bar> </top-bar></el-header>
      <el-main>
        <search-bar></search-bar>
        <el-card style="text-align: left" class="category-card">
          <div id="sort-bar">
            <div id="category">
              <span id="category-label">分类:</span>
              <div
                id="category-group"
                v-for="(item, index1) in commodityTypeAll"
                :key="index1"
                @click="
                  getType(index1);
                  refetch();
                "
              >
                <span class="category-name">{{ item.shopTypeName }}</span>
              </div>
            </div>
          </div>
          <div id="type-name" :data="commodityType">
            {{ commodityType.shopTypeName }}

            <div id="commodity">
              <el-card
                class="commodity-card2"
                style="margin-left: 10px"
                v-for="(commodity, index2) in commodityType.children"
                :key="index2"
              >
                <el-image
                  @click="goDetails(commodity.id)"
                  id="commodity-image"
                  style="width: 150px; height: 150px"
                  :src="`${commodity.imgpath}`"
                  fit="cover"
                ></el-image>
                <div class="commodity-info2">
                  <div style="height: 40px">
                    <span
                      @click="goDetails(commodity.id)"
                      id="commodity-name"
                      >{{ commodity.commodityName }}</span
                    >
                  </div>
                  <div>
                    <span
                      @click="goDetails(commodity.id)"
                      id="commodity-current-price"
                      >￥{{ commodity.commodityCurrentPrice }}</span
                    >
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import TopBar from "../TopBar/TopBar.vue";
import SearchBar from "../SearchBar/SearchBar.vue";
import { getShopType } from "../../../api/Commodity.js";
import { getCommodity } from "../../../api/Commodity.js";
export default {
  components: {
    TopBar,
    SearchBar,
  },
  watch: {
    $route: {
      handler: function (oldVal, newVal) {
        if (oldVal || newVal) {
          // 如果路由改变，则值重新拉取数据
          this.reFetch();
        }
      },
    },
  },

  data() {
    return {
      allType: [],
      commodityTypeAll: [],
      commodityType: {},
      url: require("../../../imgs/6D Mark II(1).jpg"),
    };
  },

  methods: {
    // 跳转到商品详情页并向URL传递监听到的商品ID
    goDetails(getId) {
      this.$router.push({
        path: "/commoditydetails",
        query: {
          id: getId,
        },
      });
    },
    getType(index) {
      console.log(index);
      this.commodityType = this.commodityTypeAll[index];
      console.log(this.commodityType);
    },

    // 拉取数据
    fetch() {
      getShopType()
        .then((data) => {
          let res = data.data.data;

          // 将父节点类型传入commodityType数组
          res.forEach((item) => {
            if (item.superiorShopTypeId == 0) {
              this.allType.push(item);
            }
          });

          // 将子节点类型传入父节点的children数组
          res.forEach((child) => {
            this.allType.forEach((father) => {
              if (child.superiorShopTypeId === father.id) {
                father.children.push(child);
              }
            });
          });

          // 将商品传入对应父节点的children数组
          getCommodity()
            .then((data) => {
              let commodity = data.data.data;
              // console.log(commodity);
              res.forEach((child) => {
                commodity.forEach((commodity) => {
                  if (child.id === commodity.shopTypeId) {

                    // 获取到图片文件夹的绝对路径的字符数（+6是因为有5个分隔符并且下标从0开始）
                    var line = commodity.imgpath.indexOf("files") + 6;

                    // 在原先的绝对路径中用slice截取后与服务器的端口拼接起来
                    commodity.imgpath =
                      "http://localhost:5000/" + commodity.imgpath.slice(line);
                      console.log(commodity.imgpath);
                    child.children.push(commodity);
                  }
                });
              });
            })

            .catch((err) => {
              console.log(err);
            });

          // 接收URL传来的值
          let getCommodityType = this.$route.query.getType;
          let getIndex = this.$route.query.getIndex;

          // 把监听到的类型赋值给commodityTypeAll数组
          this.commodityTypeAll = this.allType[getCommodityType].children;

          // 给commodityType数组一个初始值
          this.commodityTypeAll.forEach((item) => {
            if (
              item.shopTypeName === this.commodityTypeAll[getIndex].shopTypeName
            ) {
              this.commodityType = item;
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 根据监听到的值重新拉取数据
    reFetch() {
      // 接收URL传来的值
      let getCommodityType = this.$route.query.getType;
      let getIndex = this.$route.query.getIndex;

      // 把监听到的类型赋值给commodityTypeAll数组
      this.commodityTypeAll = this.allType[getCommodityType].children;

      // 给commodityType数组一个初始值
      this.commodityTypeAll.forEach((item) => {
        if (
          item.shopTypeName === this.commodityTypeAll[getIndex].shopTypeName
        ) {
          this.commodityType = item;
        }
      });
    },
  },
  mounted() {
    // 拉取数据
    this.fetch();
  },
};
</script>

<style scoped>
/* 布局框架 */
.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/* 布局框架end */

/* 分类卡 */
.category-card {
  margin: 30px auto;
  width: 60%;
  min-height: 800px;
  height: 100%;
}

#category {
  width: 100%;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}
#category-label {
  float: left;
  width: 50px;
  height: 150px;
  font-size: 15px;
  color: #999999;
}
#category-group {
  float: left;
}
.category-name {
  margin-left: 20px;
}
.category-name:hover {
  cursor: pointer;

  color: #b4a078;
}
/* 分类卡end */

#type-name {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  margin: 10px 0;
}

/* 商品卡片 */
.commodity-info2 {
  margin-top: 5px;
  font-size: 15px;
  background-color: beige;
}

#commodity-name:hover,
#commodity-current-price:hover {
  color: orange;
  border-bottom: 3px solid sandybrown;
  cursor: pointer;
}

#recommend {
  padding: 0 150px;
}

#commodity {
  display: flex;
  flex-wrap: wrap;
}

.el-image {
  cursor: pointer;
}

.commodity-card2 {
  width: 31%;
  height: 250px;
  margin-bottom: 20px;
  text-align: center;
}

/* 商品卡片end */

/* 清除浮动时父级高度坍塌 */
#category:after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
</style>